$(function(){
   $('.folder').click(function(){
       $(this).parent().next('.box').slideToggle();
   });
});

function start() {
        var
            canvas, // canvas ist die "Leinwand" auf die gezeichnet werden kann
            gl, // DAS WebGL-Objekt (wird vom Browser abgefragt, falls dieser WebGL unterstützt
            webGLProgramObject, // "GPU-Programm", das zur Berechnung der Grafik verwendet wird
            vShaderQuellcode, // String des Vertex-Shader Quellcodes
            vShader,          // der Shader selbst
            fShaderQuellcode, // String des Fragment-Shader Quellcodes
            fShader,          // der Shader selbst
            vertexAttribLoc,  // Verknüpfung zwischen JavaScript und Vertex-Shader
            vVertices,        // Array der Dreieckskoordinaten
            vertexPosBufferObjekt; // Der WebGL-Buffer, der die Dreieckskoordinaten aufnimmt

        canvas = window.document.getElementById("glcanvas");

        try {
            // Falls der Browser es unterstuetzt, wird hier WebGL
            // erstmalig  angesprochen und der "WebGL-Context" in
            // dem Objekt gl gespeichert.
            gl = canvas.getContext("experimental-webgl");
        } catch (e) {}
        if (!gl) {
            window.alert("Fehler: WebGL-Context nicht gefunden");
        }

        // Das Shader-Program-Objekt fasst spaeter den Vertex-
        // und Fragment-Shader zusammen.
        webGLProgramObject = gl.createProgram();

        // Der folgende String enthaelt den kompletten Quellcode
        //  fuer einen minimalistischen Vertex-Shader:
        vShaderQuellcode =
            'attribute vec4 vPosition; \n\
            void main() \n\
            { \n\
                gl_Position = vPosition; \n\
            } \n';
        // Das Vertex-Shader-Objekt wird angelegt:
        vShader = gl.createShader(gl.VERTEX_SHADER);
        //           - mit seinem Quelltext verknuepft:
        gl.shaderSource(vShader, vShaderQuellcode);
        //           - kompiliert:
        gl.compileShader(vShader);
        //           - dem Shader-Program-Objekt hinzugefuegt:
        gl.attachShader(webGLProgramObject, vShader);

        // Nochmal das gleiche Vorgehen wie fuer den Vertex-
        // Shader; analog fuer den Fragment-Shader:
        fShaderQuellcode =
            'precision mediump float;\n\
            void main()  \n\
            {     \n\
                gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);\n\
            } \n';
        fShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fShader, fShaderQuellcode);
        gl.compileShader(fShader);
        gl.attachShader(webGLProgramObject, fShader);
        // Das Shader-Program-Objekt ist vollstaendig und muss
        // gelinkt werden.
        gl.linkProgram(webGLProgramObject);
        // Da theoretisch mehrere Shader-Program-Objekte moeglich
        // sind, muss angegeben werden, welches benutzt werden soll.
        gl.useProgram(webGLProgramObject);
        // RGB-Alpha Farbe zum loeschen des Hintergrundes:
        gl.clearColor(0.0, 0.0, 0.0, 0.0);
        // Hintergrund loeschen
        gl.clear(gl.COLOR_BUFFER_BIT);

        // Die Verknuepfung zwischen JavaScript und dem
        // Shader-Attribut
        vertexAttribLoc = gl.getAttribLocation(webGLProgramObject, "vPosition");
        // Ein Array mit den Koordinaten, der Eckpunkte des Dreiecks
        // das dargestellt wird.
        vVertices = new Float32Array([
    	    0.0,  0.5, 0.0,
            -0.5, -0.5, 0.0,
            0.5, -0.5, 0.0 ]);
        // ein WebGL-Buffer-Objekt wird erzeugt:
        vertexPosBufferObjekt = gl.createBuffer();
        // ...und als aktives Objekt gesetzt:
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexPosBufferObjekt);
         // die Arraydaten werden an den aktiven Puffer uebergeben:
        gl.bufferData(gl.ARRAY_BUFFER, vVertices, gl.STATIC_DRAW);
        gl.vertexAttribPointer(vertexAttribLoc, 3, gl.FLOAT, false, 0, 0);
        gl.enableVertexAttribArray(vertexAttribLoc);

        gl.drawArrays(gl.TRIANGLES, 0, 3);
    }

    window.onload = function () {
        start();
    };
